<template>
    <div>
      <!-- 搜索结果页-头部导航 -->
      <div class="search-result-container">
        <!-- 点击实现后退效果 -->
        <van-nav-bar
          title="搜索结果"
          left-arrow
          @click-left="$router.go(-1)"
          fixed
        />
      </div>
      <!-- 文章列表 -->
      <div>
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset='10'
      >
          <ArticleItem
          v-for="obj in articleList"
          :key="obj.art_id"
          :artObj="obj"
          :isShow='false'
          @click.native="itemClickFn(obj.art_id)"
          ></ArticleItem>
        </van-list>
      </div>
    </div>
</template>

<script>
// 组件标签上，@事件名都是自定义事件需要组件内$emit('事件名')这个时间才能使用
// 如果想要直接绑定原生事件
// 需要添加 事件修饰符.native -> 给组件内根标签，绑定原生click点击事件

import { searchResultAPI } from '@/api'
import ArticleItem from '@/components/ArticleItem'
export default {
  name: 'SearchResult',
  components: {
    ArticleItem
  },
  data () {
    return {
      page: 1, // 页码
      articleList: [],
      loading: false,
      finished: false
    }
  },
  async created () {
    const res = await searchResultAPI({
      page: this.page,
      q: this.$route.params.kw // 本页面搜索页，index.vue传参传进来了，可以用this.$route.params.参数获取参数
    })
    this.articleList = res.data.data.results
  },
  // 业务:
  // 前端(自己) -> 后端(自己)
  // 后端保存文章的数据, 文章里的图片来自于其他服务器路径cnblog(图片第三方的)
  // 后端只是保存了图片的地址
  // 后端会把数据和图片地址返回给前端, 前端铺设页面, 用img标签 -> 第三方图片(404/403) - (人家把图片删除了)
  // 404 无法解决 -> 后台换图 (前端只能给个占位图提示)

  // 403 你无权利去请求此地址 -> 后端做了图片防盗链
  // 防止你用img标签来请求此图片 (它不想让它的图片, 被你的网站所引用)
  // 后端会判断请求时, Reffer字段的来源是不是自己的地址
  // 解决: meta不让浏览器携带请求头里reffer, 让后端判断失效
  methods: {
    // 触底触发Load事件
    async onLoad () {
      // 如果还有数据 就加载下一页
      this.loading = true
      if (this.articleList.length > 0) {
        this.page++
        const res = await searchResultAPI({
          page: this.page,
          q: this.$route.params.kw // 本页面搜索页，index.vue传参传进来了，可以用this.$route.params.参数获取参数
        })

        if (res.data.data.results.length === 0) {
          // 没有更多数据了
          this.finished = true
          return
        }
        console.log(res)
        // 请求到了更多数据，加到articleList里
        this.articleList = [...this.articleList, ...res.data.data.results]
        this.loading = false
      }
    },
    itemClickFn (artId) {
      this.$router.push({
        path: `/detail?art_id=${artId}`
      })
    }

  }

}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
